import { Carousel, Col, Empty, Modal, Row, Spin, Typography } from "antd";
import { useEffect, useState } from "react";
import { getProductDetail } from "@/services/product";
import { gutter } from "../const/keys";

const { Text, Paragraph } = Typography;

// index.modules
import styles from "./index.modules.less";

// import { sleep } from "@/utils";

type Pros = {
  data: any;
  onClose: (reflash: boolean) => void;
};

const App = (props: Pros) => {
  const { data = {}, onClose = () => {} } = props;
  const [spinning, setSpinning] = useState(false);
  const [detailData, setDetailData] = useState({
    productPicList: [],
    modelSpecification: "",
    productIntroduction: "",
    supplyPrice: 0,
  });
  const getData = async () => {
    setSpinning(true);
    const { data: detailData } = await getProductDetail({ id: data.id });

    setDetailData(detailData || {});
    setSpinning(false);
  };
  useEffect(() => {
    getData();
  }, []);
  return (
    <Modal
      width={1000}
      title="产品详情"
      open
      okText="关闭"
      onOk={() => onClose(false)}
      onCancel={() => onClose(false)}
      cancelButtonProps={{
        style: {
          display: "none",
        },
      }}
    >
      <Spin spinning={spinning}>
        <Row gutter={[gutter * 2, gutter]} align={"middle"}>
          <Col span={14}>
            <div className={styles.imgContainer}>
              {detailData.productPicList &&
              detailData.productPicList?.length > 0 ? (
                <Carousel
                  arrows={detailData.productPicList.length > 1}
                  autoplay
                >
                  {detailData?.productPicList?.map(
                    (
                      item: {
                        filePath: string;
                      },
                      index: number
                    ) => {
                      const key = `${index}-${item.filePath}`;
                      return (
                        <div key={key} className={styles.item}>
                          <img
                            src={item.filePath}
                            alt="图片加载失败"
                            style={{
                              objectFit: "contain",
                            }}
                          />
                        </div>
                      );
                    }
                  )}
                </Carousel>
              ) : (
                <Empty
                  description="暂无图片"
                  style={{
                    marginTop: 100,
                  }}
                />
              )}
            </div>
          </Col>
          <Col span={10}>
            <Row gutter={[gutter, gutter]}>
              <Col span={24}>
                <h2>{detailData.modelSpecification}</h2>
              </Col>
              <Col
                span={24}
                style={{
                  height: 255,
                  overflowY: "auto",
                  background: "#fafafa",
                  padding: "10px 15px",
                  borderRadius: 5,
                }}
              >
                <Paragraph>
                  {detailData.productIntroduction || "暂无介绍"}
                </Paragraph>
              </Col>
              <Col span={24}>
                指导价格：{" "}
                <Text type="danger">
                  <strong style={{ fontSize: 30, margin: "0 15px" }}>
                    ¥ {(detailData.supplyPrice / 100).toFixed(2)}
                  </strong>
                </Text>
              </Col>
              <Col span={24}></Col>
            </Row>
          </Col>
        </Row>
      </Spin>
    </Modal>
  );
};
export default App;
